<template>
    <div class="like-content">
    <div class="title">
        <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
        <span>猜你喜欢</span>
    </div>
    <ul class="like-list">
        <li class="like-list-item" v-for="item in likeGoods " :key="item.goodsId">
            <a href="" class="like-link">
                <div class="like-tag" style="background-image:url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png)">随买随用</div>
                <div><img :src="item.image" alt=""></div>
                <div class="like-info">
                 <p class="info-title">{{item.title}}</p>
                 <p class="info-conment"><span class="iconfont info-star">&#xe602;</span><span>{{item.pjnumber}}条评价</span></p>
                 <p class="info-price"><span class="price">￥{{item.price}}</span>起<span class="address">{{item.address}}</span></p>
                 <p class="info-feature">{{item.feature}}</p> 

                </div>
            </a>
        </li>
    </ul>
    <div class="allGoods"><a href="">查看所有产品</a></div>
    </div>
</template>

<script>
    export default {
        name:"HomeLike",
        props:{
            likeGoods:Array
        }

     
        
    }
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.like-content
   width 100%
   margin-top .2rem
   background-color #fff
  .allGoods
    
    font-size .28rem
    background-color #ffffff
    text-align center
     
    padding  .2rem 0
  .allGoods a
    color #00afc7  
  .title
    padding .24rem  
  .title img 
     display inline-block
     height .4rem  
  .title span 
     display inline-block
     font-size .32rem
  .like-list
     margin-left .24rem
     margin-top   .3rem  
    .like-list-item
        position: relative;
        overflow: hidden;
        padding: .2rem 0;
        border-bottom: 1px solid #e0e0e0; 
      .like-link
         display: block;
         width: 100%;
         height: 100%;
      .like-link img
          float left
          width 2rem
          heigh 2rem
        .like-tag
           position: absolute;
           top: .2rem;
           left: 0;
           width: 1.02rem;
           height: .38rem;
           background-size: 100%;
           color: #fff;
           font-size: .2rem;
           line-height: .38rem;
           text-indent: .04rem;
           
        .like-info
            overflow hidden
            padding-left .22rem 
         .info-title
             margin-top .2rem
             height: .44rem;
             color: #212121;
             font-size: .32rem;
             line-height: .44rem;
         .info-conment
             margin-top: .14rem;
             height: .34rem;
           .info-star
             color #ffb436;
             margin-right .3rem  
         .info-price
             position: relative;
             margin-top: .22rem;
             color: #616161;
             font-size: .27rem;
             line-height: .4rem; 
           .price
             color #ff8300;
             font-size .4rem  
           .address
             position absolute
             right .3rem 
             top 0 
         .info-feature
             margin-top: .48rem;
             margin-right: .24rem;
             background: #fff9f9;
             padding: .04rem .1rem;
             color: #f55;
             font-size: .24rem;
             line-height: .34rem; 
             ellipsis()   
</style>